<style lang="less">
    @import '../../styles/common.less';
    @import '../../styles/table.less';
</style>

<template>
    <div>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>
                    <p slot="title" style="height:25px;">
                        <Icon type="ios-keypad"></Icon> 监控列表
                        <Button type="info" size="small" style="float: right" @click="add"><Icon type="plus-round"></Icon> 新增</Button>
                    </p>
                    <div>
                        <div>
                            <Table stripe :columns="columns" :data="rows" border></Table>
                        </div>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
    name: 'getList',
    components: {
        // canEditTable //组件名称，需要import
    },
    data () {
        return {
            rows: [],
            columns: [
                {
                    title: 'ID',
                    align: 'center',
                    key: 'webcam_id',
                    width: 80,
                }, {
                    title: '省市区',
                    align: 'center',
                    width: 150,
                    render: (h, params) => {
                        return params.row.province + ' ' + params.row.city + ' ' + params.row.district;
                    }
                }, {
                    title: '地址',
                    align: 'center',
                    key: 'full_address',
                    width: 150,
                }, {
                    title: '推流',
                    align: 'center',
                    key: 'push_url',
                    width: 250,
                },{
                    title: '直播',
                    align: 'center',
                    key: 'live_url',
                    width: 250,
                }, {
                    title: '备注',
                    align: 'center',
                    key: 'remarks',
                    width: 150,
                }, {
                    title: '时间',
                    align: 'center',
                    key: 'created_at',
                    width: 150,
                },

                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {type: 'success', size: 'small'},
                                style: { marginRight: '5px'},
                                on: {
                                    click: () => {
                                        this.show(params.row.webcam_id)
                                    }
                                }
                            }, '查看'),
                            h('Button', {
                                props: {type: 'primary', size: 'small'},
                                style: {marginRight: '5px'},
                                on: {
                                    click: () => {
                                        this.edit(params.row.webcam_id)
                                    }
                                }
                            }, '编辑'),
                            h('Poptip', {
                                props: {confirm: true, title: '您确定要删除这条数据吗?', transfer: true},
                                on: {
                                    'on-ok': () => {
                                        this.remove(params.row.webcam_id);
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {type: 'error', size: 'small'}
                                }, '删除')
                            ]),
                        ]);
                    }
                }
            ],
        };
    },
    methods: {
        getList() {
            this.$http.post('admin/webcam/getList', this.$qs.stringify()).then((res) => {
                var d = res.data;
                if (d.code == 0) {
                    this.rows = d.data;
                } else {
                    this.$Notice.error({
                        title: 'Error Warning',
                        desc: `Error：${d.msg}<br>`
                    });
                }
            })
        },
        show (webcam_id) {

        },
        add () {
            this.$router.push({
                name: 'webcamAdd'
            });
        },
        edit (webcam_id) {
            this.$router.push({
                name: 'webcamAdd',
                query: {webcam_id: webcam_id},
            });
        },
        remove (webcam_id) {
            this.$http.post('admin/webcam/delete', this.$qs.stringify({webcam_id: webcam_id})).then((res) => {
                var d = res.data;
                if (d.code == 0) {
                    this.getList();
                } else {
                    this.$Notice.error({
                        title: 'Error Warning',
                        desc: `Error：${d.msg}<br>`
                    });
                }
            });
        },
        changePage (current_page) {
            this.current_page = current_page;
            this.getList();
        },
        formatDate (date) {
            this.daterange = date;
        },
    },
    created () {
        this.getList();
    }
};
</script>
